<template>
	<image 
		class="image" 
		v-for="(image, index) in imageList" 
		:key="index"
		:src="getImgUrl(image)" 
		:style="{ width: imageSize, height: imageSize }"
		mode="aspectFill" 
		@click="previewImage(index)"
	></image>
</template>

<script>
	import { ImgUrlPrefix } from '@/utils/util.js'
	export default {
		props: {
			imageList: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				loading: false
			}
		},
		computed: {
			// // TODO 待优化...
			// const system = uni.getSystemInfoSync();	
			// // 计算图片尺寸，这里的105是根据布局尺寸得来的
			// // 1、最外层左右 padding：15px -> 30px
			// // 2、每张图片右边距：5px -> 3张图片：15px
			// // 3、头像：45px，右侧边距：15px
		  imageSize() {
		    const imageCount = this.imageList.length;
			const system = uni.getSystemInfoSync();
		    return imageCount >= 3 ? `${(system.screenWidth - 105) / 3}px` : `${(system.screenWidth - 105) / 2}px`;
		  }
		},
		methods: {
			// 图片预览
			previewImage(index) {
				let imageList = []
				let app = this
				imageList = this.imageList.map(item => app.getImgUrl(item))
				console.log(imageList)
				uni.previewImage({
					urls: imageList,
					current: index
				})
			},
			// 图片地址拼接
			getImgUrl(val) {
			    const url = ImgUrlPrefix(val)
			    return url
			},
		}
	}
</script>

<style lang="scss" scoped>
	.image {
		margin: 10rpx 10rpx 0 0;
		/* #ifdef H5*/
		width:47% !important;
		height: 240rpx !important;
		/* #endif */
		// width: 90px;
		// height: 90px;
		border-radius: 4rpx;
	}
</style>